<template>
    <div class="nav_wrap">
        
        <slot name="left">
            <div class="left">
                <GoBack style="margin-right: 10px;" v-if="isShowBack" />
                <MinWindow v-if="!isShowBack"  />
                <CurrentTime />
                <div class="shop"  @click="handleClick">{{ userStore.shopInfo.shopName }}</div>
            </div>
        </slot>
    
   
       
        <slot name="center">
            <div class="center" v-if="isShowTitle">
                <span class="title" >{{ route.meta?.title }}</span>
            </div>
        </slot>
   
   
        <slot name="right">
            <div class="right">
                <OnlineStatus />
                <UserInfo />
            </div>
        </slot>
  
        <slot></slot>
    </div>
</template>
<script setup lang='ts'>
import {useRoute} from 'vue-router'
import MinWindow from '../components/MinWindow.vue'
import OnlineStatus from '../components/OnlineStatus.vue'
import { useUserStore } from '@renderer/store/user'
const userStore = useUserStore()
withDefaults(defineProps<{ isShowBack?: boolean,isShowTitle?:boolean}>(),{
    isShowBack:true,
    isShowTitle:true
})

const route = useRoute()


let clickCount = 0; // 点击计数器
let timer; // 定时器句柄

function handleClick() {
    // 每次点击增加计数器
    clickCount++;

    // 如果达到5次点击，则执行操作并重置计数器
    if (clickCount === 5) {
        console.log('连续点击了5次！');
        executeOperation();
        resetClickCounter();
    } else {
        // 设置或重置定时器，如果在2秒内没有再次点击，则重置计数器
        clearTimeout(timer);
        timer = setTimeout(resetClickCounter, 2000); // 2秒的时间窗口
    }
}
//2秒内连续点击5次，则打开控制台
function executeOperation() {
    console.log('打开控制台~')
    window.electron.ipcRenderer.send('open-main-window-devtools')
}

function resetClickCounter() {
    // 重置点击计数器
    clickCount = 0;
}


</script>
<style scoped lang='scss'>
.nav_wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: var(--ev-c-black);
    .left{
        .shop{
            margin-left: 10px;
        }
    }
    .left,.center,.right {
        display: flex;
        align-items: center;
    }
    .center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        .title{
            padding: 0 10px;
        font-size: 24px;
        }
        
        
    }
   
}
</style>
